﻿<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Простой редактор графиков</title>
	<link rel="stylesheet" type="text/css" href="styles.css"/>
	<script type="text/javascript" src="lib/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="../html/html.js"></script>
	<script type="text/javascript" src="../jspath/jspath.js"></script>
	<script type="text/javascript" src="lib/raphael-min.js"></script>
	<script type="text/javascript" src="lib/popup.js"></script>
	<script type="text/javascript" src="rgraph.js"></script>
	<script type="text/javascript" src="grapheditor.js"></script>
	<style type="text/css">
		#graphPanel{
			width:600px;
			height: 250px;
			background-color:#fff;
		}
		#editorPanel{
			margin:10px;
			padding:5px;
		}
	</style>
	<script type="text/javascript">
		var graphData = {
			labels:["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль"],
			rows:[
				[100, 110, 114, 115, 118, 122, 124],
				[105, 107, 110, 114]
			],
			rowSettings:[
				{name:"План", color:"#f00"},
				{name:"Факт", color:"#080"}
			]
		};
		
		function displayGraph(data){
			$("#graphPanel")
				.html("")
				.rgraph(data.rows,{
					backColor:"90-#fff-#999",
					dotColor:"#ffc",
					bgOpacity: .1,
					viewTable: false,
					viewBackground: true,
					viewLegend: true,
					labels: data.labels,
					rowSettings: data.rowSettings
				});
		}
		
		$(function(){
			$("#editorPanel").graphEditor(graphData);
			displayGraph(graphData);
			GraphEditor.onchange = function(data){
				displayGraph(data);
			}
		});
	</script>
</head>
<body>
	<h1>Простой редактор графиков</h1>
	<table border="0" cellpadding="3" cellspacing="0">
		<tr>
			<td id="editorPanel" valign="top"></td>
			<td valign="top">
				<div id="graphPanel"></div>
			</td>
		</tr>
	</table>
</body>
</html>